import Item from 'antd/lib/list/Item'
import React, { memo } from 'react'

import {SongsCoverWappers} from './style'
import {getCount,getSizeImage} from '../../utils/format_util'

export default memo(function JPSongsCover(props) {

  const {info} = props

  return (
    <SongsCoverWappers>
      <div className="cover-top">
        <img src={getSizeImage(info.picUrl,140)} alt={Item.copywriter}/>

        <div className="cover sprite_covor">
          <div className="info sprite_covor">
            <span>
              <i className="sprite_icon erji"></i>
              {getCount(info.playCount)}
            </span>
            <i className="sprite_icon play"></i>
          </div>
        </div>
      </div>
      <div className="cover-bottom text-nowrap">
        {info.name}
      </div>
      <div className="cover-source text-nowrap">
        by {info.copywriter || info.creator.nickname}
      </div>
    </SongsCoverWappers>
  )
})
